<template>
	<view class="book">
		<scroll-view class="left" scroll-y >
			<view @click="leftClickHandle(index)" :class="active===index?'active':''" v-for="(item,index) in books" :key="item.id">
			{{item.title}}
			</view>
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view class="bookItem">
				<image src="https://s1.ax1x.com/2023/03/22/ppafGI1.png" mode=""></image>
			</view>
			<view class="bookItem">
				<image src="https://s1.ax1x.com/2023/03/22/ppafGI1.png" mode=""></image>
			</view>
			<view class="bookItem">
				<image src="https://s1.ax1x.com/2023/03/22/ppafGI1.png" mode=""></image>
			</view>
			<view class="bookItem">
				<image src="https://s1.ax1x.com/2023/03/22/ppafGI1.png" mode=""></image>
			</view>
			<view class="bookItem">
				<image src="https://s1.ax1x.com/2023/03/22/ppafGI1.png" mode=""></image>
			</view>
			<view class="bookItem">
				<image src="https://s1.ax1x.com/2023/03/22/ppafGI1.png" mode=""></image>
			</view>
			<view class="bookItem">
				<image src="https://s1.ax1x.com/2023/03/22/ppafGI1.png" mode=""></image>
			</view>
			<view class="bookItem">
				<image src="https://s1.ax1x.com/2023/03/22/ppafGI1.png" mode=""></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			active:0,
			index:1,
			books:[
				{
					id:1,
					title:" (01)哲学"
				},
				// {
				// 	id:2,
				// 	title:"（02）经济学"
				// },
				// {
				// 	id:3,
				// 	title:"（03）法学"
				// },
				// {
				// 	id:4,
				// 	title:"（04）教育学"
				// },
				// {
				// 	id:5,
				// 	title:"（05）文学"
				// },
				// {
				// 	id:6,
				// 	title:"（06）历史学"
				// },
				// {
				// 	id:7,
				// 	title:"（07）理学"
				// },
				// {
				// 	id:8,
				// 	title:"（08）工学"
				// },
				// {
				// 	id:9,
				// 	title:"（09）农学"
				// },
				// {
				// 	id:10,
				// 	title:"（10）医学"
				// },
				// {
				// 	id:11,
				// 	title:"（11）军事学"
				// },
				// {
				// 	id:12,
				// 	title:"（12）管理学"
				// },
				// {
				// 	id:13,
				// 	title:"（13）艺术学"
				// }
				
			]
			}
		},
		methods: {
			leftClickHandle(index){
				this.active=index
			}
		}
	}
</script>

<style lang="scss">
page{
	height: 100%;
}
.book{
	height: 100%;
	font-family: "微软雅黑";
	display: flex;
	justify-content: space-between;
	.left{
		width: 120px;
		height: 100%;
		border-right: 1px solid #eee;
		margin-right: 10px;
		view{
			height: 60px;
			line-height: 60px;
			color: #333;
			padding-left: 5px;
			padding-right: 5px;
			font-size: 30rpx;
			border-top: 1px solid #eee;
		}
		.active{
			background: #429dd9;
			color: #fff;
		}
	}
	.right{
		border-left: 1px solid #eee;
		margin-left: 5px;
		padding-left: 10px;
		padding-right: 10px;
		height: 100%;
		width: 260px;
		.bookItem{
			width: 40%;
			padding-left: 10px;
			padding-right: 10px;
			margin-bottom: 10px;
			float: left;
			image{
				width: 90px;
				height: 130px;
				display: block;
				vertical-align: middle;
			}
		}
	}
}
</style>
